<template>
    <div>
        <Row type="flex" justify="center" class="code-row-bg">
            <!--左侧-->
            <ICol span="16">
                <Card dis-hover>
                    <p slot="title">
                        <Icon type="md-albums"/>
                        留言板
                    </p>
                    <!--发表留言-->
                    <div>
                        <div style="display: flex;justify-content: center">
                            <Input v-model="messageVo.content" maxlength="250" show-word-limit type="textarea"
                                   placeholder="大人！我有话要说！" style="width: 100%;margin-top: 1%;border-radius: 4%"
                                   :rows="5"/>
                        </div>
                        <div style="text-align: right">
                            <Button type="info" style="width: 80px" @click="publishMessage">发布</Button>
                        </div>
                    </div>
                </Card>
                <Card style="margin-top: 24px" dis-hover>
                    <!--留言列表-->
                    <h3 style="border-left: 4px solid deepskyblue;padding-left: 4px">留言列表</h3>
                    <div style="border-top: 1px solid #888888;margin-top: 2%">
                        <div v-if="messageList===null||messageList.length<1">
                            <h3 style="text-align: center;margin-top: 1%">无留言</h3>
                        </div>
                        <div v-else>
                            <!--父留言-->
                            <div v-for="(com,index) in messageList" :key="index"
                                 style="border-bottom: 1px solid #888888">
                                <div style="display: flex;margin-top: 2%;margin-left: 1%;padding-bottom: 2%;">
                                    <!--头像-->
                                    <div style="width: 6%">
                                        <Avatar shape="square" size="large" :src="com.currUser.uheadpicture"/>
                                    </div>
                                    <!--右侧-->
                                    <div style="width: 94%;margin-top: 2px">
                                        <!--上-->
                                        <div style="display: flex;justify-content: space-between">
                                            <div style="font-weight: bolder;color: red;font-size: 15px">
                                                <span>{{com.currUser.unickname}}</span>
                                            </div>
                                            <div style="margin-right: 2%">{{com.mesMestime}}</div>
                                        </div>
                                        <!--下-->
                                        <div style="display: flex;justify-content: space-between">
                                            <span style="margin-left: 1%;width: 80%;margin-top: 1%;margin-bottom: 1%">{{com.mesContent}}</span>
                                            <div style="width: 20%;margin-top: 1%;text-align: right;margin-right: 2%">
                                                <a style="margin-right: 20px" @click="setGood(com)">
                                                    <Icon v-if="!loveVisable.get(com.mesId)" type="ios-heart"/>
                                                    <Icon v-else type="ios-heart" color="red"/>
                                                    <span style="margin-left: 2px">{{com.mesLikecount}}</span>
                                                </a>
                                                <a style="color: #888888" @click="appendMessage(com.mesId)">
                                                    <Icon type="ios-redo"/>
                                                    回复</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div v-show="backVisable.get(com.mesId)" style="margin-bottom: 2%">
                                    <!--发表留言-->
                                    <div style="width: 100%;text-align: right">
                                        <Input v-model="BackContent" maxlength="250"
                                               show-word-limit type="textarea"
                                               placeholder="大人！我有话要说！"
                                               style="width: 80%;margin-top: 1%;border-radius: 4%"
                                               :rows="5"/>
                                    </div>
                                    <div style="text-align: right">
                                        <Button type="info" style="width: 80px"
                                                @click="backMessage(com.mesId,com.currUser.uid)">
                                            发布
                                        </Button>
                                    </div>
                                </div>
                                <!--子留言-->
                                <div v-for="(item,index2) in com.children" :key="index2">
                                    <div style="width: 90%;display: flex;margin-left: 10%;padding-top:1%;padding-left:1%;padding-bottom:1%;border-top: 1px solid #888888;">
                                        <!--头像-->
                                        <div style="width: 6%">
                                            <Avatar shape="square" size="large" :src="item.currUser.uheadpicture"/>
                                        </div>
                                        <!--右侧-->
                                        <div style="width: 94%;margin-top: 2px;margin-left: 1%;">
                                            <!--上-->
                                            <div style="display: flex;justify-content: space-between">
                                                <div style="width: 40%">
                                                    <span style="font-size: 15px;font-weight: bolder;">{{item.currUser.unickname}}</span>
                                                    <span style="color: #888888;margin-left: 3%">回复：</span>
                                                    <span style="font-size: 15px;font-weight: bolder;">{{item.targetUser.unickname}}</span>
                                                </div>
                                                <div style="margin-right: 2%">{{item.mesMestime}}</div>
                                            </div>
                                            <!--下-->
                                            <div style="display: flex;justify-content: space-between">
                                                <span style="margin-left: 1%;width: 80%;margin-top: 1%;margin-bottom: 1%">{{item.mesContent}}</span>
                                                <div style="width: 20%;margin-top: 1%;text-align: right;margin-right: 2%">
                                                    <a style="margin-right: 20px" @click="setGood(item)">
                                                        <Icon v-if="!loveVisable.get(item.mesId)" type="ios-heart"/>
                                                        <Icon v-else type="ios-heart" color="red"/>
                                                        <span style="margin-left: 2px">{{item.mesLikecount}}</span>
                                                    </a>
                                                    <a style="color: #888888"
                                                       @click="appendMessage(item.mesId)">
                                                        <Icon type="ios-redo"/>
                                                        回复</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-show="backVisable.get(item.mesId)" style="margin-bottom: 2%">
                                        <!--发表留言-->
                                        <div style="width: 100%;text-align: right">
                                            <Input v-model="BackContent" maxlength="250"
                                                   show-word-limit type="textarea"
                                                   placeholder="大人！我有话要说！"
                                                   style="width: 80%;margin-top: 1%;border-radius: 4%"
                                                   :rows="5"/>
                                        </div>
                                        <div style="text-align: right">
                                            <Button type="info" style="width: 80px"
                                                    @click="backMessage(com.mesId,item.currUser.uid)">
                                                发布
                                            </Button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--分页-->
                    <div style="margin-left: 3%;">
                        <Page style="height: 30px;margin-top: 1%" :total="total" :page-size="messageQueryVo.pageSize"
                              show-elevator show-sizer
                              show-total @on-change="changePageNum" :page-size-opts="pageSizeChoice"
                              @on-page-size-change="changePageSize"/>
                    </div>
                </Card>
            </ICol>
            <!--右侧-->
            <ICol span="6" style="margin-left: 2%">
                <Sider/>
            </ICol>
        </Row>
    </div>
</template>

<script>
  import Sider from '../components/sider/Sider'

  export default {
    data () {
      return {
        messageVo: {
          content: ''
        },
        messageList: [],
        messageQueryVo: {
          pageNum: 1,
          pageSize: 10,
          like: false,
          top: false
        },
        total: 0,
        loveVisable: new Map(),
        backVisable: new Map(),
        BackContent: '',
        pageSizeChoice: [10, 20, 50, 100, 200]
      }
    },
    components: {
      Sider
    },
    mounted () {
      // 切换页面时滚动条自动滚动到顶部
      window.scrollTo(0, 0)
      this.getMessageList()
    },
    methods: {
      // 获取留言列表
      getMessageList () {
        this.$http.get('message', { params: new URLSearchParams(this.messageQueryVo) }).then(res => {
          res = res.data
          if (res.code === 0) {
            this.messageList = res.data
            this.total = res.count
          } else {
            this.$Notice.error({ title: res.msg })
          }
        })
      },
      // 改变当前页码
      changePageNum (pagenum) {
        this.messageQueryVo.pageNum = pagenum
        this.getMessageList()
      },
      // 改变每页个数
      changePageSize (pagesize) {
        this.messageQueryVo.pageSize = pagesize
        this.getMessageList()
      },
      // 设置点赞
      setGood (row) {
        this.loveVisable.set(row.mesId, !this.loveVisable.get(row.mesId))
        var params = new URLSearchParams()
        params.append('id', row.mesId)
        params.append('like', this.loveVisable.get(row.mesId))
        this.$http.post('message', params).then(res => {
          res = res.data
          if (res.code === 0) {
            this.getMessageList()
          } else {
            this.$Notice.error({ title: res.msg })
          }
        })
      },
      // 回复留言框出现
      appendMessage (id) {
        this.backVisable.clear()
        this.backVisable.set(id, true)
        this.getMessageList()
      },
      // 回复留言
      backMessage (parentId, targetId) {
        if (this.BackContent === null || this.BackContent === '') {
          this.$Notice.info({ title: '评论内容不能为空' })
          return
        }
        // 检验是否登录
        if (!window.localStorage.getItem('lhamster_identity_info')) {
          this.$store.dispatch('showLogin')
          this.$Message.info('请登录后再操作')
          return
        }
        var params = new URLSearchParams()
        // 对留言的回复
        params.append('parent', parentId)
        params.append('target', targetId)
        params.append('content', this.BackContent)
        // 回复评论
        this.$http.post('blog-message', params).then(res => {
          res = res.data
          if (res.code === 6101) {
            // 清空回复框
            this.backVisable.clear()
            this.BackContent = ''
            this.getMessageList()
            this.$Notice.success({ title: res.msg })
          } else {
            this.$Notice.error({ title: res.msg })
          }
        })
      },
      // 发表留言
      publishMessage () {
        if (this.messageVo.content === null || this.messageVo.content === '') {
          this.$Notice.info({ title: '留言内容不能为空' })
          return
        }
        // 检验是否登录
        if (!window.localStorage.getItem('lhamster_identity_info')) {
          this.$store.dispatch('showLogin')
          this.$Message.info('请登录后再操作')
          return
        }
        // 发表一级留言
        this.$http.post('blog-message', new URLSearchParams(this.messageVo)).then(res => {
          res = res.data
          if (res.code === 6101) {
            // 重置内容
            this.messageVo.content = ''
            // 提示用户成功
            this.$Notice.success({ title: res.msg })
            // 重新查询评论
            this.getMessageList()
          } else {
            this.$Notice.error({ title: res.msg })
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
